<template>
  <div class="BindTel">
    <Header title="绑定手机号"></Header>
    <div style="padding:42px 0 0 0">
      <div style="background: #fff;padding: 0 12px;">
        <div class="bindi">
          <div class="textMiddle">新手机号码</div>
          <div class="textinp">
            <input type="text" v-model="tel" placeholder="输入手机号码">
          </div>
        </div>
        <div class="bindi">
          <div class="textMiddle">验证码</div>
          <div class="textinp">
            <input type="text" v-model="mobileVerifyCode" placeholder="输入验证码">
          </div>
          <div @click="TimeOut?'':__getcode()"
               style="padding-left:20px;color:#959595;width: 90px;position:absolute;right: 12px;border-left: 1px #888 solid;">
            {{TimeOut?CountTime+'S':'获取验证码'}}
          </div>
        </div>
      </div>
    </div>
    <x-button type="primary" class="saveinfo" @click.native="save_info">确定</x-button>
    <confirm v-model="show" :show-cancel-button="false">
      <p style="text-align:center;">{{datamsg}}</p>
    </confirm>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Header from './../Header'
  import {XButton, Confirm} from 'vux'
  import {EditTel, GetCode} from '../../api/mine'

  export default {
    name: 'BindTel',
    data () {
      return {
        tel: '',
        mobileVerifyCode: '',
        TimeOut: false,
        CountTime: 60,
        datamsg: '',
        show: false
      }
    },
    methods: {
      save_info () {
        let _this = this
        if (_this.tel && _this.mobileVerifyCode) {
          if (!(/^1[34578]\d{9}$/.test(_this.tel))) {
            Vue.$vux.toast.text('手机号码格式有误，请重填', 'middle')
            return
          }
          EditTel({
            'mobileVerifyCode': _this.mobileVerifyCode,
            'tel': _this.tel
          }).then(res => {
            if (res.data.status === 'success') {
              _this.$router.push({
                path: `/Mine`
              })
            }
            _this.datamsg = res.data.msg
            _this.show = true
          })
        } else {
          Vue.$vux.toast.text('输入框不能为空', 'middle')
        }
      },
      __getcode () {
        if (!(/^1[34578]\d{9}$/.test(this.tel))) {
          Vue.$vux.toast.text('手机号码有误，请重填', 'middle')
          return
        }
        Vue.$vux.loading.show({
          text: '请稍等...'
        })
        GetCode({
          'tel': this.tel
        }).then(res => {
          if (res.data.status === 'success') {
            Vue.$vux.loading.hide()
            this.TimeOut = true
            var count = setInterval(() => {
              this.CountTime -= 1
              if (this.CountTime < 1) {
                clearInterval(count)
                this.CountTime = 60
                this.TimeOut = false
              }
            }, 1000)
            Vue.$vux.toast.text('验证码发送成功', 'middle')
          }
        })

      }
    },
    components: {
      Header,
      XButton,
      Confirm
    }
  }
</script>

<style lang='less' type="text/less">
  .BindTel {
    font-size: 14px;
    .bindi {
      display: flex;
      height: 46px;
      align-items: center;
      border-bottom: 1px #F8FAF9 solid;
      input {
        padding: 8px 0;
        border: none;
        font-size: 14px;
        &:focus {
          outline: none;
        }
      }
      .textMiddle {
        width: 80px;
        font-size: 15px;
      }
      .textinp {
        flex: 1;
      }
    }
    .saveinfo {
      width: calc(100% - 15px);
      height: 42px;
      line-height: 42px;
      font-size: 16px;
      margin-top: 24px;
      color: #fff;
      border-radius: 42px;
      background-color: @common-color;
    }
  }
</style>
